<template>
  <div>
    <van-overlay :show="show">
      <div class="bind-m-wrapper">
        <div class="bind-m-wrapper-title">修改手机号</div>
        <div>
          <input @keyup="mobileFilter"
                 autocomplete
                 maxlength="11"
                 placeholder="请输入手机号码"
                 v-model="mobile"
          />
        </div>
        <div class="bind-m-wrapper_input">
          <input
            maxlength=6
            placeholder="请输入验证码"
            v-model="authCode"/>
          <!--suppress JSUnresolvedFunction -->
          <p @click="getAuthCode({mobile})" id="auth"
             :style="authState==='counting'?'color:#666':''">{{btnAuth}}</p>
        </div>
        <div class="control_panel">
          <div @click="cancel">取消</div>
          <div @click="confirm">确定</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import {Overlay, Toast} from 'vant'
  import UserAPI from '../repo/api/UserAPI'
  import ApplyAPI from '../repo/api/applyAPI'
  import {userTypes} from '../repo/store/user'
  import TeamAPI from "../repo/api/TeamAPI";

  Vue.use(Overlay)
  export default {
    name: 'VantOverLayCommon',
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      isOrg: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        authState: 'init',
        authTips: '获取验证码',
        countdown: 0,
        countdownHandler: undefined,

        mobile: '',
        authCode: '',
      }
    },
    computed: {
      btnAuth() {
        let authState = this.authState
        if (authState === 'init') {
          return '获取验证码'
        }
        if (authState === 'retry') {
          return '重新获取'
        } else {
          return `${this.countdown}s`
        }
      },
    },
    watch: {
      authState(nVal) {
        if (nVal === 'counting') {
          this.startCountdown()
        } else {
          this.stopCountdown()
          // this.setCountdown(0)
        }
      }
    },
    created() {
      this.authState = 'init'
    },
    destroyed() {
      this.stopCountdown()
    },
    methods: {
      _hasErrorMobile(mobile) {
        return !(mobile && mobile.length === 11 && mobile.startsWith('1'))
      },
      _hasErrorAuthCode(authCode) {
        return !(authCode && authCode.length >= 6)
      },
      getAuthCode() {
        if (this.authState === 'counting') return
        if (this._hasErrorMobile(this.mobile)) {
          return Toast('请输入正确的手机号码')
        }
        /* 设置setAuthState开始计数 */
        this.authState = 'counting'

        return UserAPI.getAuthCode(this.mobile)
          .then(_ => {
            Toast('发送成功')
          })
      },
      startCountdown() {
        if (this.countdown > 0) return
        if (this.countdownHandler) return
        this.countdown = 60
        this.countdownHandler = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown = this.countdown - 1
          } else {
            this.authState = 'retry'
            clearInterval(this.countdownHandler)//清除定时器
            this.countdownHandler = null
          }
        }, 1000) //1秒执行一次
      },
      stopCountdown() {
        clearInterval(this.countdownHandler)
        this.countdownHandler = null
      },
      mobileFilter() {
        this.mobile = this.mobile.replace(/[^\d]/g, '')
      },
      confirm() {
        if (this._hasErrorMobile(this.mobile)) {
          return Toast('请输入正确的手机号码')
        }
        if (this._hasErrorAuthCode(this.authCode)) {
          return Toast('请输入正确的验证码')
        }
        let sendData = {
          mobile: this.mobile,
          authCode: this.authCode,
        }
        if (this.isOrg) {

          console.log(this.mobile,this.authCode)
          TeamAPI.modifyTeamInfo(sendData).then((result) => {
            Toast('修改成功')
            this.$emit('cancelFun', false)
          }).catch((e) => {
            console.log(e)
          })
        } else {

          ApplyAPI.editUser(this.mobile, this.authCode).then((result) => {
            this.$store.commit(userTypes.SAVE_USER_MOBILE, this.mobile)
            this.$emit('cancelFun', false)
          }).catch((e) => {
            Toast(e.result.errorInfo)
          })
        }
      },
      cancel() {
        this.$emit('cancelFun', false)
      },
    }

  }
</script>

<style scoped>
  .bind-m-wrapper {
    position: absolute;
    top: calc(50% - 272px / 2);
    background: white;
    left: calc(50% - 272px / 2);
    width: 272px;
    height: 272px;
    padding: 24px 16px;
    box-sizing: border-box;
    border-radius: 10px;
  }

  .pc {
    width: 350px;
    height: 250px;
    top: calc(50% - 250px / 2);
    left: calc(50% - 350px / 2);
  }

  .bind-m-wrapper-title {
    font-weight: bold;
    font-size: 20px;
  }

  .bind-m-wrapper input {
    height: 48px;
    background: #F7F7F7;
    color: #999999;
    border-radius: 2px;
    width: 100%;
    margin: 24px auto 0px auto;
    text-indent: 16px;
  }

  .bind-m-wrapper_input {
    position: relative;
  }

  #auth {
    position: absolute;
    top: 54%;
    right: 10px;
    font-size: 14px;
    color: #1DA1F2;
  }

  .control_panel {
    display: flex;
    justify-content: flex-end;
  }

  .control_panel > div {
    margin-left: 40px;
    margin-top: 24px;
  }

  .control_panel > div:nth-of-type(2) {
    color: #1DA1F2;
  }
</style>
